<template>
  <div class="w-100 h-100 d-flex">
    <div style="width: 40%; height: 100%">
      <div style="width: 200px; height: 200px; margin: auto; margin-top: 80px">
        <div class="bk w-100 h-100">
          <div style="color: rgba(0, 194, 255, 1); font-size: 26px">
            {{ leftData.label }}
          </div>
          <div style="font-size: 28px; font-family: 'OPPOSans-Regular'">
            {{ leftData.value }}
          </div>
        </div>
      </div>
    </div>
    <div style="width: 60%; height: 100%; padding: 100px 0 40px 0">
      <div style="height: 50px; width: 100%; display: flex">
        <img
          style="
            width: 30px;
            height: 30px;
            margin-top: 10px;
          "
          src="../../assets/image/underGround/little_bk1.png"
        >
        <div
          style="
            width: 120px;
            margin-left: 20px;
            line-height: 50px;
            font-size: 20px;
          "
        >
          {{ props.rightData[0].label }}
        </div>
        <div
          style="
            margin-left: 20px;
            color: rgba(0, 194, 255, 1);
            font-size: 26px;
            line-height: 50px;
          "
        >
          {{ props.rightData[0].value }}
        </div>
      </div>
      <div style="height: 50px; width: 100%; display: flex; margin-top: 30px">
        <img
          style="
            width: 30px;
            height: 30px;
            margin-top: 10px;
          "
          src="../../assets/image/underGround/little_bk2.png"
        >
        <div
          style="
            width: 120px;
            margin-left: 20px;
            line-height: 50px;
            font-size: 20px;
          "
        >
          {{ props.rightData[1].label }}
        </div>
        <div
          style="
            margin-left: 20px;
            color: rgba(184, 235, 143, 1);
            font-size: 26px;
            line-height: 50px;
          "
        >
          {{ props.rightData[1].value }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  leftData: {
    type: Object,
    default: () => {},
  },
  rightData: {
    type: Array<any>,
    default: () => [],
  },
});
</script>

<style scoped lang="less">
.bk {
  background: url("../../assets/image/underGround/szy_bk.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 60px 0 40px 0;
  text-align: center;
}
</style>
